<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h2>欢迎使用中药养生服务平台管理系统</h2>
      <p>{{ greetings }}</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :span="6">
        <div class="card-panel" @click="handleSetLineChartData('orders')">
          <div class="card-panel-icon-wrapper">
            <el-icon class="card-panel-icon">
              <ShoppingCart />
            </el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">订单总数</div>
            <div class="card-panel-num">{{ statisticsData.orders }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="card-panel" @click="handleSetLineChartData('sales')">
          <div class="card-panel-icon-wrapper" style="background: #36a3f7;">
            <el-icon class="card-panel-icon">
              <Money />
            </el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">销售额</div>
            <div class="card-panel-num">￥{{ Number(statisticsData.sales).toFixed(2) }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="card-panel" @click="handleSetLineChartData('users')">
          <div class="card-panel-icon-wrapper" style="background: #f4516c;">
            <el-icon class="card-panel-icon">
              <User />
            </el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">用户数量</div>
            <div class="card-panel-num">{{ statisticsData.users }}</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="card-panel" @click="handleSetLineChartData('posts')">
          <div class="card-panel-icon-wrapper" style="background: #34bfa3;">
            <el-icon class="card-panel-icon">
              <ChatLineRound />
            </el-icon>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">帖子数量</div>
            <div class="card-panel-num">{{ statisticsData.posts }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>{{ chartData.title }}</span>
              <el-radio-group v-model="chartTimeRange" size="small">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart">
            <line-chart :chart-data="chartData" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div>
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart">
            <pie-chart />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 待办事项 -->
    <el-card class="todo-card">
      <template #header>
        <div>
          <span>待办事项</span>
        </div>
      </template>
      <el-table :data="todoList" style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="type" label="类型" width="180">
          <template #default="scope">
            <el-tag :type="scope.row.type === '订单' ? 'danger' : scope.row.type === '用户' ? 'success' : 'warning'">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleAction(scope.row)">
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Money, ShoppingCart, User, ChatLineRound } from '@element-plus/icons-vue'
import LineChart from '@/components/Charts/LineChart.vue'
import PieChart from '@/components/Charts/PieChart.vue'

// 模拟统计数据
const statisticsData = reactive({
  orders: 1289,
  sales: 126540.32,
  users: 3852,
  posts: 1562
})

// 欢迎语
const greetings = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了，注意休息！'
  if (hour < 9) return '早上好，新的一天开始了！'
  if (hour < 12) return '上午好，工作顺利！'
  if (hour < 14) return '中午好，适当休息一下吧！'
  if (hour < 18) return '下午好，继续努力！'
  if (hour < 22) return '晚上好，不要忘记休息哦！'
  return '夜深了，注意休息！'
})

// 图表数据
const chartTimeRange = ref('week')
const chartDataType = ref('orders')

const lineChartData = {
  orders: {
    title: '订单统计',
    week: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    month: {
      expectedData: [200, 192, 120, 144, 160, 130, 140, 320, 230, 320, 330, 360],
      actualData: [180, 160, 151, 106, 145, 150, 130, 210, 250, 280, 310, 340],
      xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    year: {
      expectedData: [1200, 1400, 1800, 1600, 1200],
      actualData: [1300, 1200, 1500, 1700, 1600],
      xAxisData: ['2019', '2020', '2021', '2022', '2023']
    }
  },
  sales: {
    title: '销售额统计',
    week: {
      expectedData: [8000, 12000, 11000, 10000, 9500, 12000, 15000],
      actualData: [9000, 8000, 12000, 11000, 9000, 10000, 13000],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    month: {
      expectedData: [20000, 18000, 22000, 25000, 24000, 30000, 35000, 32000, 34000, 38000, 35000, 40000],
      actualData: [18000, 16000, 21000, 24000, 22000, 28000, 34000, 30000, 32000, 36000, 32000, 38000],
      xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    year: {
      expectedData: [150000, 180000, 210000, 240000, 270000],
      actualData: [140000, 170000, 200000, 230000, 250000],
      xAxisData: ['2019', '2020', '2021', '2022', '2023']
    }
  },
  users: {
    title: '用户统计',
    week: {
      expectedData: [50, 80, 120, 90, 60, 70, 100],
      actualData: [70, 60, 90, 130, 100, 110, 120],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    month: {
      expectedData: [200, 180, 250, 300, 290, 330, 400, 380, 450, 480, 500, 550],
      actualData: [220, 200, 240, 320, 270, 350, 380, 400, 430, 500, 520, 540],
      xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    year: {
      expectedData: [1000, 1500, 2000, 3000, 3800],
      actualData: [1200, 1700, 2200, 3200, 3900],
      xAxisData: ['2019', '2020', '2021', '2022', '2023']
    }
  },
  posts: {
    title: '帖子统计',
    week: {
      expectedData: [30, 40, 45, 50, 55, 60, 70],
      actualData: [35, 45, 47, 52, 53, 58, 65],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    month: {
      expectedData: [100, 120, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230],
      actualData: [110, 130, 145, 155, 165, 175, 185, 195, 205, 215, 225, 235],
      xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    year: {
      expectedData: [400, 600, 800, 1000, 1200],
      actualData: [450, 650, 850, 1050, 1250],
      xAxisData: ['2019', '2020', '2021', '2022', '2023']
    }
  }
}

// 当前图表数据
const chartData = computed(() => {
  const data = lineChartData[chartDataType.value][chartTimeRange.value]
  return {
    title: lineChartData[chartDataType.value].title,
    expectedData: data.expectedData,
    actualData: data.actualData,
    xAxisData: data.xAxisData
  }
})

// 设置图表数据类型
const handleSetLineChartData = (type) => {
  chartDataType.value = type
}

// 模拟待办事项数据
const todoList = ref([
  { id: 1, title: '新订单需要处理', type: '订单', time: '2023-05-20 10:30:00' },
  { id: 2, title: '新用户注册审核', type: '用户', time: '2023-05-20 09:15:00' },
  { id: 3, title: '新帖子需要审核', type: '论坛', time: '2023-05-20 08:45:00' },
  { id: 4, title: '商品库存不足预警', type: '商品', time: '2023-05-19 16:20:00' },
  { id: 5, title: '客户投诉处理', type: '客服', time: '2023-05-19 14:10:00' }
])

// 处理待办事项
const handleAction = (row) => {
  console.log('处理待办事项:', row)
  // 实际项目中，这里应该弹出对话框或者跳转到相应的处理页面
}

// 初始化
onMounted(() => {
  // 实际项目中，这里应该调用接口获取实时数据
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .dashboard-header {
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      color: #303133;
      margin-bottom: 10px;
    }
    
    p {
      font-size: 16px;
      color: #606266;
    }
  }
  
  .panel-group {
    margin-bottom: 20px;
    
    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 20px;
      
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
        
        .icon-people {
          background: #40c9c6;
        }
        
        .icon-message {
          background: #36a3f7;
        }
        
        .icon-money {
          background: #f4516c;
        }
        
        .icon-shopping {
          background: #34bfa3;
        }
      }
      
      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
        background: #409EFF;
        
        .card-panel-icon {
          float: left;
          font-size: 24px;
          color: #fff;
        }
      }
      
      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px 0 0 80px;
        
        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }
        
        .card-panel-num {
          font-size: 24px;
          color: #409EFF;
        }
      }
    }
  }
  
  .chart-card {
    margin-bottom: 20px;
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .chart {
      height: 350px;
    }
  }
  
  .todo-card {
    margin-bottom: 20px;
  }
}
</style> 